<script setup lang="ts">
import { ref, watch } from 'vue';
import { approveFillData } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'DataApprovalModal'
});

interface Props {
  data: Api.Dataplatform.FillData | null;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'success'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const approved = ref(true);
const reason = ref('');

function handleInitModel() {
  approved.value = true;
  reason.value = '';
}

function closeModal() {
  visible.value = false;
}

async function handleSubmit() {
  if (!props.data) {
    return;
  }

  if (!approved.value && !reason.value) {
    window.$message?.warning($t('page.dataplatform.fill.rejectReasonRequired'));
    return;
  }

  const { error } = await approveFillData(props.data.id, approved.value, reason.value);
  if (!error) {
    window.$message?.success($t('page.dataplatform.fill.approvalSuccess'));
    closeModal();
    emit('success');
  }
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});
</script>

<template>
  <NModal v-model:show="visible" preset="card" :title="$t('page.dataplatform.fill.approvalData')" class="w-600px">
    <div class="flex-col gap-16px">
      <NAlert type="info" :show-icon="false">
        {{ $t('page.dataplatform.fill.approvalTip') }}
      </NAlert>

      <NCard v-if="data" :title="$t('page.dataplatform.fill.dataInfo')" size="small">
        <NDescriptions :column="1" label-placement="left" bordered>
          <NDescriptionsItem :label="$t('page.dataplatform.fill.templateName')">
            {{ data.templateName }}
          </NDescriptionsItem>
          <NDescriptionsItem :label="$t('page.dataplatform.fill.submitBy')">
            {{ data.submitByName }}
          </NDescriptionsItem>
          <NDescriptionsItem :label="$t('page.dataplatform.fill.submitTime')">
            {{ data.submitTime }}
          </NDescriptionsItem>
          <NDescriptionsItem :label="$t('page.dataplatform.fill.dataContent')">
            <NInput :value="data.dataContent" type="textarea" :rows="8" readonly />
          </NDescriptionsItem>
        </NDescriptions>
      </NCard>

      <NCard :title="$t('page.dataplatform.fill.approvalDecision')" size="small">
        <div class="flex-col gap-12px">
          <NRadioGroup v-model:value="approved">
            <NSpace>
              <NRadio :value="true">{{ $t('page.dataplatform.fill.approve') }}</NRadio>
              <NRadio :value="false">{{ $t('page.dataplatform.fill.reject') }}</NRadio>
            </NSpace>
          </NRadioGroup>

          <NInput
            v-if="!approved"
            v-model:value="reason"
            type="textarea"
            :placeholder="$t('page.dataplatform.fill.rejectReasonPlaceholder')"
            :rows="4"
          />
        </div>
      </NCard>
    </div>

    <template #footer>
      <NSpace justify="end">
        <NButton @click="closeModal">{{ $t('common.cancel') }}</NButton>
        <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
